<template>
  <div class="person-center">
    <div class="person-center-header">
      <div class="header-bg"></div>
      <div class="head-info" @click="toMyPersonData">
        <img src="../../assets/images/pic1.jpg" alt class="head-pic">
        <div class="user-info">
          <p>王小明</p>
          <p>男 / 9岁</p>
        </div>
        <img src="../../assets/images/arrow-right.png" alt class="arrow">
      </div>
      <div class="nav-list">
        <ul>
          <router-link to="/myOrder" tag="li">
            <img src="../../assets/images/wodedingdan.png" alt>
            <p>我的订单</p>
          </router-link>
          <router-link to="/MyCurriculum" tag="li">
            <img src="../../assets/images/my1.png" alt>
            <p>我的课程</p>
          </router-link>
          <router-link to tag="li">
            <img src="../../assets/images/wodekecheng.png" alt>
            <p>我的活动</p>
          </router-link>
          <router-link to tag="li">
            <img src="../../assets/images/wodejiangzuo.png" alt>
            <p>我的讲座</p>
          </router-link>
        </ul>
      </div>
    </div>
    <div class="banner">
      <img src="../../assets/images/myBanner.png" alt>
    </div>
    <div class="info-list">
      <router-link to="/myMessage" tag="div">
        <span>我的消息</span>
        <img src="../../assets/images/arrow-right.png" alt>
      </router-link>
    </div>
   <div class="info-list">
      <router-link to tag="div">
        <span>我的优惠券</span>
        <img src="../../assets/images/arrow-right.png" alt>
      </router-link>
    </div>
       <div class="info-list" style="margin-bottom:0;border-bottom:1px solid #e5e5e5;">
      <router-link to="/Comment" tag="div">
        <span>意见反馈</span>
        <img src="../../assets/images/arrow-right.png" alt>
      </router-link>
    </div>
       <div class="info-list" style="margin-bottom:.50rem;">
      <router-link to tag="div">
        <span>修改密码</span>
        <img src="../../assets/images/arrow-right.png" alt>
      </router-link>
    </div>
       <div class="quit-out-login" @click="loginOut">
           退出登录
       </div>
    <footer-page/>
  </div>
</template>
<script>
import FooterPage from "../../components/footer";
export default {
  components: {
    FooterPage
  },
  methods:{
    loginOut () {
      this.$router.push('/IndexHome')
    },
    toMyPersonData () {
       this.$router.push({path:'/PersonData'})
    }
  }
};
</script>
<style>
</style>
<style lang="scss">
.person-center-header {
  background: #fff;
  min-height: 5rem;
  position: relative;
  .header-bg {
    height: 2.2rem;
    background: #ff6422;
    border-bottom-left-radius: 60%;
    border-bottom-right-radius: 60%;
  }
  .head-info {
    width: 90%;
    height: 2.2rem;
    background: #fff;
    box-shadow: 0 0.04rem 0.1rem #f7f7f7;
    border-radius: 0.2rem;
    position: absolute;
    top: 0.6rem;
    left: 5%;
    display: flex;
    display: -webkit-flex;
    -webkit-align-items: center;

    img.head-pic {
      width: 1.35rem;
      height: 1.35rem;
      border-radius: 50%;
      margin-left: 0.5rem;
      margin-right: 0.4rem;
    }
    .user-info {
      flex: 1;
      -webkit-flex: 1;
      p {
        &:nth-child(1) {
          font-size: 0.5rem;
          color: #333;
          margin-bottom: 0.2rem;
        }
        &:nth-child(2) {
          font-size: 0.28rem;
          color: #333;
        }
      }
    }
    img.arrow {
      padding-right: 0.5rem;
      width: 0.16rem;
      height: 0.28rem;
    }
  }
  .nav-list {
    width: 90%;
    margin: 1.2rem auto 0 auto;
    ul {
      display: flex;
      display: -webkit-flex;
      -webkit-align-items: center;
      li {
        flex: 1;
        -webkit-flex: 1;
        text-align: center;
        position: relative;
        &::after{
          content:"";
          height: .60rem;
          width: 1px;
          background: #e5e5e5;
          position: absolute;
          right: 0;
          top:.20rem;
          

        }
    
        &:last-of-type::after {
           height:0;
          width: 0;
        }
        p {
          font-size: 0.24rem;
          color: #444;
        
        }
        &:nth-child(1) {
          img {
            width: 0.62rem;
            height: 0.62rem;
          }
          p {
              padding-top: .26rem;
          }
        }
        &:nth-child(2) {
          img {
            width: 0.61rem;
            height: 0.53rem;
          }
        p {
              padding-top: .34rem;
          }
        }
        &:nth-child(3) {
          img {
            width: 0.62rem;
            height: 0.62rem;
          }
           p {
              padding-top: .27rem;
          }
        }
        &:nth-child(4) {
          img {
            width: 0.75rem;
            height: 0.75rem;
            position: relative;
            top:-.07rem;
          }
      p {
              padding-top: .12rem;
          }
        }
      }
    }
  }
}
.banner {
  margin: 0.3rem auto;
  text-align: center;
  img {
    width: 100%;
    height: 1.4rem;
  }
}
.info-list {
  height: 1.2rem;
  background: #fff;

  padding: 0 0.4rem;
  margin-bottom: .30rem;
  div {
    display: flex;
    display: -webkit-flex;
    -webkit-align-items: center;
    justify-content: space-between;
    height: 1.2rem;
    img {
      width: 0.16rem;
      height: 0.28rem;
    }
    span {
        font-size: .32rem;
        color: #444;
    }
  }
}
.quit-out-login {
    width: 80%;
    height: .98rem;
    margin:0 auto 1.5rem auto;
    text-align: center;
    line-height: .98rem;
    border:1px solid #ff6422;
    border-radius: .60rem;
    font-size: .32rem;
    color: #ff6422;
    &:active {
        background: #ff6422;
        color: #fff;
    }
}
</style>



